<template>
  <div>
    <div
      style="background-color: #fff; border-bottom: 1px solid #e6e6e6"
     
    >
      <div class="company-navigate">
        <!-- <img  src="@/static/engineering5188/company/home.png" alt=""> -->
        <img src="../../../static/engineering5188/company/home.png" alt="" />
        <div>
          <span class="Thesea">线上海事展</span> >
          <span class="companyName">搜索结果</span>
        </div>
      </div>
    </div>

    <div class="jieguo">
      共搜索到“<span style="color: #0d61af">{{keyword}}关键字</span>”相关的 {{ countNum }} 种商品
    </div>

    <div  class="shopTypeStype">
      <!-- 一级类目区域 -->
      <div class="category-level1">
        <div class="category-label">一级类目：</div>

        <div class="allType">
          <div
            class="allTypeRight"
            :class="{ 'active-category': selectItem.id === undefined  }"
            @click="selectLevel1({id:undefined, title: '全部',children:[]})"
          >
            全部
          </div>
          <div
            class="allTypeRight"
            v-for="(item, index) in level1Categories"
            :key="index"
            :class="{ 'active-category': selectItem.id === item.id }"
            @click="selectLevel1(item)"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
      <!-- 二级类目区域 -->
      <div class="category-level2" v-if="selectedLevel1">
        <div class="category-label">二级类目：</div>

        <div class="typeTwo">
          <div class="allTypeTwo">
            <div
              class="allTypeRightTwo"
              :class="{ 'active-category': selectedLevel2.id === undefined }"
              @click="selectLevel2({id:undefined, title: '全部',children:[]})"
            >
              全部
            </div>
            <div
              class="allTypeRightTwo"
              v-for="(subItem, subIndex) in level2Categories"
              :key="subIndex"
              :class="{ 'active-category': selectedLevel2.id === subItem.id }"
              @click="selectLevel2(subItem)"
            >
              {{ subItem.title }}
            </div>
          </div>

          <!-- 三级类目区域 -->
          <div class="category-level3" v-if="selectedLevel2 && showMore">
            <div class="allTypeThree">
              <div
                class="allTypeRightThree"
                v-for="(thirdItem, thirdIndex) in level3Categories"
                :key="thirdIndex"
                :class="{ 'active-category': selectedLevel3 === thirdItem }"
                @click="selectLevel3(thirdItem)"
              >
                {{ thirdItem }}
              </div>
            </div>
          </div>
        </div>

        <!-- <div class="lessSq" v-if="showMore" @click="showLess">
          收起 <i class="el-icon-arrow-up"></i>
        </div>
        <div class="MoreSq" v-if="!showMore" @click="showMoreItems">
          展开 <i class="el-icon-arrow-down"></i>
        </div> -->
      </div>

      <!-- 排序和商品数量区域 -->
      
    </div>
    <div class="shopTypeStype sort-and-count">
        <div class="zonghe">综合排序</div>
        <div class="count-label">
          (共<span style="color: #ff6b00">{{ countNum }}</span>个商品)
        </div>
      </div>
  </div>
</template>
  
  <script>
export default {
  name: "shoptype",
  props: {
    itemObj:{
      required: true,
      type: Object,
    }
  },
  watch: {
    '$route.query.keyword': {
      immediate: true, // 立即执行一次回调函数
      handler(newKeyword) {
        this.keyword = newKeyword;
        this.$emit("updateData", {catid: this.selectItem.id, catid2: this.selectItem2.id});
      }
    }
  },
  data() {
    return {
      selectItem:{},
      selectItem2:{},
      company_name: "",
      level1Categories: [
      ],
      level2Categories: [],
      level3Categories: {
        海事船舶: {
          动力设备: [
            "不顶",
            "主机装置",
            "柴油机",
            "燃油(汽)轮机",
            "空气压缩机",
          ],
        },
      },
      selectedLevel1: "全部",
      selectedLevel2: {},
      selectedLevel3: {},
      showMore: false,
      countNum:0,
      keyword: "",
    };
  },
  created() {
    this.keyword = this.$route.query.keyword;
    this.selectItem = this.itemObj;
    this.level2Categories = this.selectItem.children;
    this.getData(); 
  },
  methods: {
    updateCount(count){
      console.log(count,'dededede');
      this.countNum = count;
    },
    getData() {
      this.list = [];
      this.$httpApi("/api/channelList", {
      }, 'get').then(res => {
        for (let i = 0; i < res.data.length ; i++) {
          this.level1Categories.push(res.data[i])
        }
      })
    },
    selectLevel1(item) {
      this.selectItem = item;
      this.level2Categories = item.children;
      // this.level2Categories.unshift({
      //   id: undefined,
      //   title: "全部" 
      // })
      this.showMore = false;
      this.$emit("updateData", {catid: item.id});
    },
    selectLevel2(item) {
      this.selectedLevel2 = item;
      this.selectItem2 = item;
      this.level3Categories = item.children;
      if(this.level3Categories && this.level3Categories.length>0){
        this.showMore = true;
      }
      this.$emit("updateData", {catid: this.selectItem.id, catid2: item.id});
    },

    selectLevel3(item) {
      this.selectedLevel3 = item;
    },

    showMoreItems() {
      this.showMore = true;
    },
    showLess() {
      this.showMore = false;
    },
  },
};
</script>
  
  <style lang="less" scoped>
.jieguo {
  width: 1530px;
  margin: 25px auto;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 20px;
  color: #000000;
  font-style: normal;
  text-transform: none;
}

.Thesea {
  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 14px;
  color: #7b7b7b;

  font-style: normal;
  text-transform: none;
}

.companyName {
  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 14px;
  color: #000000;

  font-style: normal;
  text-transform: none;
}

.company-navigate {
  width: 1530px;
  height: 60px;
  margin: auto;
  display: flex;
  align-items: center;
}

.company-navigate img {
  width: 14px;
  height: 14px;
  margin-right: 12px;
}

.category-level2 {
  display: flex;
  border-top: 1px solid #e5e5e5;
}

.MoreSq {
  width: 60px;
  height: 26px;
  background: #ffffff;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #f0f0f0;
  text-align: center;
  line-height: 26px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #4d4d4d;
  margin-top: 13px;
  font-style: normal;
  text-transform: none;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
}
.lessSq {
  width: 60px;
  text-align: center;
  line-height: 26px;
  height: 26px;
  background: #ffffff;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #f0f0f0;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #4d4d4d;
  font-style: normal;
  text-transform: none;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
  margin-top: 13px;
}

.shopTypeStype {
  width: 1530px;
  margin: auto;
  margin-top: 20px;
  border: 1px solid #e5e5e5;
}

.zonghe {
  width: 117px;
  height: 48px;
  background: #fafafa;
  border-radius: 0px 0px 0px 0px;
  // border: 1px solid #e5e5e5;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #000000;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.category-level1 {
  border: 1px solid #f7f7f7;
  display: flex;
  padding-right: 24px;
}

.allTypeRight {
  // padding: 4px 8px;
  text-align: center;

  margin-right: 20px;
  cursor: pointer;
}

.allTypeRightTwo {
  padding: 4px 8px;
  text-align: center;
  margin-right: 20px;
  margin-top: 13px;
  cursor: pointer;
}

.allTypeRightThree {
  padding: 4px 8px;
  text-align: center;
  margin-right: 20px;
  cursor: pointer;
}

.allType {
  border-radius: 4px 4px 4px 4px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  font-style: normal;
  text-transform: none;
  display: flex;
  align-items: center;
  padding-left: 20px;
  flex-wrap: wrap;
}

.allTypeThree {
  width: 1320px;
  border-radius: 4px 4px 4px 4px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  font-style: normal;
  text-transform: none;
  display: flex;
  align-items: center;
  padding-left: 20px;
  background: #f7f7f7;
  margin-bottom: 20px;
  padding: 8px 0;
  margin-top: 17px;
  margin-left: 20px;
}

.allTypeTwo {
  width: 1320px;
  border-radius: 4px 4px 4px 4px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  font-style: normal;
  text-transform: none;
  display: flex;
  align-items: center;
  padding-left: 20px;
}

.category-label {
  width: 117px;
  background: #fafafa;
  border-radius: 0px 0px 0px 0px;
  // border: 1px solid #e5e5e5;
  line-height: 48px;
  text-align: center;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;

  font-style: normal;
  text-transform: none;
}
.active-category {
  background: #e1eafb;
  border-radius: 3px 3px 3px 3px;
  text-align: center;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #0052d9;
  font-style: normal;
  text-transform: none;
}
.sort-and-count {
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  line-height: 48px;
  text-align: center;
  margin-top: 16px;
}
.count-label {
  padding-right: 20px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;

  font-style: normal;
  text-transform: none;
}
</style>